<template>
  <ul class="list-box">
    <li v-for="item in listData" :key="item.t_cat_pk" class="list-item">
      <router-link :to="{name:'second-center',params: item}" v-if="item.t_cat_pk">
        {{item.cat_name}}
      </router-link>
      <span v-else>
        {{item.cat_name}}
      </span>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      allData: {
        '2': [
          { cat_name: "互联网营销学院", t_cat_pk: 6 },
          { cat_name: "健康与管理学院", t_cat_pk: 7 },
          { cat_name: "会计学院", t_cat_pk: 8 },
          { cat_name: "虚拟现实产业发展学院", t_cat_pk: 9 },
          { cat_name: "唐人坊非物质文化遗产传承学院", t_cat_pk: 10 },
          { cat_name: "盲人学院", t_cat_pk: 11 },
          { cat_name: "盲人音乐学院", t_cat_pk: 27 },
        ],
        '3': [
          { cat_name: "党委办公室", t_cat_pk: 12 },
          { cat_name: "团委", t_cat_pk: 13 },
          { cat_name: "党委组织部" },
          { cat_name: "党委宣传部" },
          { cat_name: "党委统战部" },
          { cat_name: "党委学工部" },
          { cat_name: "工会" },
        ],
        '4': [
          { cat_name: "学校办公室", t_cat_pk: 19 },
          { cat_name: "教务处", t_cat_pk: 20 },
          { cat_name: "人力资源处" , t_cat_pk: 21},
          { cat_name: "后勤保卫处" , t_cat_pk: 22},
          { cat_name: "财务处" , t_cat_pk: 23},
          { cat_name: "采购招标办公室" , t_cat_pk: 24},
          { cat_name: "学生处" , t_cat_pk: 25},
        ],
      },
    };
  },
  computed: {
    listData() {
        return this.allData[this.$route.params.t_cat_pk];
    }
  }
};
</script>

<style scoped>
    .list-box {
      display: flex;
      flex-wrap: wrap;
      padding-top: 10px;
    }

    .list-item {
      width: 25%;
      padding: 5px;
      
    }

    .list-item:nth-child(4n) {
      padding-right: 0px;
    }

    .list-item:nth-child(4n + 1) {
      padding-left: 0px;
    }

    .list-item>span {
        cursor: not-allowed;
    }

    .list-item>* {
      display: block;
      padding: 20px 0px;
      border-radius: 5px;
      background-color: #ffaf81;
      text-align: center;
    }

    .list-item>*:hover{
      background-color: var(--base-color);
      color: #fff;
    }
</style>